<template >
    <a-input-search v-bind="$attrs" @search="onSearch" placeholder="输入验证码">
        <template #enterButton>
            <a-button :disabled="state">{{ btnText }}</a-button>
        </template>
    </a-input-search>
</template>
<script lang="ts" setup>
import { ref, defineProps, withDefaults, defineEmits } from 'vue'

/**
 * 类型检查
 */
interface IProps {

    /**
     * 时间 单位/秒 默认 60秒
     */
    time?: number;

}


const props = withDefaults(defineProps<IProps>(), {
    time: 60
})
const emit = defineEmits(['send'])

const btnText = ref("发送验证码");
const state = ref(false);

//发送验证码
const onSearch = () => {
    state.value = true;
    let step = props.time;
    let stepTime = setInterval(function () {
        step = step - 1;
        btnText.value = `(${step})秒后重发`;
        if (step <= 0) {
            btnText.value = "发送验证码"
            state.value = false;
            clearInterval(stepTime);
        }
    }, 1000)

    emit("send");
}

</script>
<style>
</style>